<template>
    <div class="goods-list">
        <el-card class="card">
            <template #header>
                <div class="card-header">商品列表</div>
            </template>

            <!-- 添加搜索框和下拉框 -->
            <el-form :inline="true" class="search-form" :model="selectname">
                <el-form-item label="搜索">
                    <el-input v-model="selectname.searchProductName" placeholder="请输入商品名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary"  @click="select">搜索</el-button>
                </el-form-item>
            </el-form>

            <el-table :data="products" stripe>
                <el-table-column prop="name" label="商品名称"></el-table-column>
                <el-table-column prop="salePrice" label="商品价格"></el-table-column>
                <el-table-column prop="description" label="商品描述"></el-table-column>
                <!-- 添加图片列 -->
                <el-table-column label="商品图片">
                    <template #default="scope">
                        <!-- 假设商品图片路径存储在 productImages 字段中，你可以根据实际情况修改 -->
                        <img :src="scope.row.imageUrl" alt="商品图片" style="max-width: 100px; max-height: 100px;">
                    </template>
                </el-table-column>

                <el-table-column label="仓库库存">
                    <template slot-scope="scope">
                        {{scope.row.repositoryCommodity.count}}
                    </template>
                </el-table-column>

                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button type="primary" size="small" @click="editGoods(scope.row)">编辑</el-button>
                        <el-button type="danger" size="small" @click="deleteGoods(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-footer>
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="current"
                    :page-sizes="ListPage"
                    :page-size="size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </el-footer>
        </el-card>

        <!-- 编辑模态框 -->
        <el-dialog :visible.sync="editDialogVisible" title="编辑商品">
            <el-form :model="currentEditGoods" label-width="80px">
                <el-form-item label="商品名称">
                    <el-input v-model="currentEditGoods.name"></el-input>
                </el-form-item>
                <el-form-item label="商品价格">
                    <el-input v-model="currentEditGoods.salePrice"></el-input>
                </el-form-item>
                <el-form-item label="商品描述">
                    <el-input type="textarea" v-model="currentEditGoods.description"></el-input>
                </el-form-item>
                <el-form-item label="商品图片">
                    <img :src="currentEditGoods.imageUrl" alt="商品图片" style="max-width: 100px; max-height: 100px;">
                </el-form-item>
                <el-form-item label="商品状态">
                    <el-radio-group v-model="currentEditGoods.status">
                        <el-radio :label="1">上架</el-radio>
                        <el-radio :label="0">下架</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="editDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="saveEditGoods">保存</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            vo: {},
            total: 0,
            size: 10,
            current: 1,
            ListPage: [10, 20, 30, 40, 50],
            products: [],
            selectname:{
                searchProductName: '',

            },
            editDialogVisible: false,
            currentEditGoods: {}
        };
    },
    methods: {
        // 编辑
        editGoods(goods) {
            this.currentEditGoods = { ...goods };
            this.editDialogVisible = true;
        },
        // 删除
        deleteGoods(goods) {
            this.$confirm('确定要删除该商品吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                const index = this.products.indexOf(goods);
                if (index!== -1) {
                    this.products.splice(index, 1);
                }
                this.$message.success('商品删除成功');
            }).catch(() => {
                this.$message.info('已取消删除');
            });
        },
        search() {
            // this.vo.name = this.searchProductName;
            this.$axios.post(`product/query/${this.current}/${this.size}`, this.vo).then(r => {
                console.log(444,r.data.list)
                this.products = r.data.list;
                this.total = r.data.total;
            });
        },
        // 分页
        handleSizeChange(val) {
            this.size = val;
            this.search();
        },
        // 分页
        handleCurrentChange(val) {
            this.current = val;
            this.search();
        },
        // 搜索
        select() {
            this.vo = this.selectname;
            this.search()
            console.log(222222,this.vo);
        },
        // 保存编辑后的商品信息
        saveEditGoods() {
            // 这里可以添加保存商品信息的逻辑，例如发送请求到后端
            this.$axios.post(`/product/updateProduct`, this.currentEditGoods).then(r => {
                this.search();
                this.editDialogVisible = false;
                this.$message.success('商品信息保存成功');
            }).catch(error => {
                this.$message.error('商品信息更新失败');
                console.error(error);
                this.editDialogVisible = false;
                this.search();
            });

        }
    },
    created() {
        this.search();
    }
};
</script>

<style scoped>
.goods-list {
    padding: 20px;
}

.card {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card-header {
    font-size: 18px;
    font-weight: bold;
}

.search-form {
    margin-bottom: 20px;
}
</style>